<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<form class="cmxform" id="serviceAssort" method="post"
	action="house/assort/addServiceAssort">
	<div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h5 class="panel-title">基本信息</h5>
			</div>
			<div class="panel-body">
				<!-- 地下面积 -->
				<div class="style_box">
					<table id="div_service" cellpadding="10" cellspacing="5"
						class="mytable" width="100%" >
						<tr>
							<td colspan="6"><a class="btn btn-danger radius"
								id="addUse2" onclick="addTr(this)"> 添加</a></td>
						</tr>
						<tr>
							<td width="40"><span>类型</span></td>
							<td width="260"><input type="type" id="" name="serviceType"
								value="" /><input type="type" id="entityId_id1" name="id" value=""
								hidden="hidden" /></td>
							<td width="40"><span>面积</span></td>
							<td width="260"><input type="type" id="" name="serviceArea"
								value="" /> ㎡</td>
							<td width="40"><span>位置</span></td>
							<td><input type="type" id="" name="serviceSite" value="" />
								<a href="javascript:void(0)" onclick="delTr(this)" name="delBtn">
									<!-- <i class="Hui-iconfont Hui-iconfont-del"></i> --> <i
									class="icon-fullscreen"></i>
							</a></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div style="width:100%;text-align:center; padding-top:20px">
			<div id="btn_div1">
				<button class="btn btn-danger radius my-btn"
					onclick="saveServiceAssort(0)" type="button">提交</button>
				<button class="btn btn-danger radius my-btn"
					onclick="saveServiceAssort(1)" type="button">保 存</button>
				<a class="btn btn-default radius" onClick="resetForms('serviceAssort');"> 重置 </a>
				<br />
			</div>
			<div id="btn_div2" style="display:none;">
				<shiro:hasPermission name="permission:edit">
					<button id="modifyBtn" type="button"
						class="btn btn-danger radius my-btn" onclick="saveServiceAssort(3)">启用编辑</button>
					<button class="btn btn-danger radius my-btn hidbtn"
						onclick="saveServiceAssort(2)" type="button">保存修改</button>
					<a class="btn btn-default radius hidbtn"
						onClick="resetForms('serviceAssort');">重置</a>
				</shiro:hasPermission>
			</div>
		</div>

	</div>

	<div style="display:none"></div>
	<script type="text/javascript">
		$(function() {
			getServiceAssortMsg();
			mySubmit("serviceAssort", initServiceAssort, success);
		});
	
		//获取编辑页面数据
		function getServiceAssortMsg() {
			var fkProjectid = parent.parent.projectID; //建筑id
			var url = "house/assort/getServiceAssortByBuild";
			$.getJSON(url, {
				fkProjectId : fkProjectid
			}, function(data, status) {
				if (data.length > 0) {
					var html = "<tr><td colspan=\"6\"><a class=\"btn btn-danger radius\" id=\"addUse2\" onclick=\"addTr(this)\"> 添加</a></td></tr>";
					for (var i=0;i<data.length;i++) {
						html += "<tr><td width=\"40\"><span>类型</span></td><td width=\"260\"><input type=\"type\"id=\"\"name=\"serviceType\"value=\"" + data[i].serviceType + "\"/>"
							+ "<input type=\"type\"id=\"entityId_ids\"name=\"id\"value=\"" + data[i].id + "\" hidden=\"hidden\"/></td><td width=\"40\"><span>面积</span></td><td width=\"260\">"
							+ "<input type=\"type\"id=\"\"name=\"serviceArea\"value=\"" + returnFloat(data[i].serviceArea) + "\"/> ㎡</td><td width=\"40\"><span>位置</span></td>"
							+ "<td><input type=\"type\"id=\"\"name=\"serviceSite\"value=\"" + data[i].serviceSite + "\"/>"
							+ "<a data-id=\""+data[i].id+"\" href=\"javascript:void(0)\"onclick=\"delTr(this)\" hidden=\"hidden\" name=\"delBtn\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
					}
					$("#serviceAssort").find("#div_service").html(html);
					$("#serviceAssort").find("#addUse2").attr("disabled", "disabled");
					$("#serviceAssort").find("#btn_div2").show();
					$("#serviceAssort").find("#btn_div1").hide();
					$("#serviceAssort").find("input,textarea").attr("readonly", true);
				} else {
					$("#serviceAssort").find("#btn_div2").hide();
					$("#serviceAssort").find("#btn_div1").show();
				}
			});
		}
	
		var optServiceAssort;
		//optServiceAssort操作字段，0：临时保存；1：新增；2：修改
		function saveServiceAssort(val) {
			optServiceAssort = val;
	
			if (val == 3) {
				//解除锁定状态
				var index = layer.confirm('确定开启编辑状态？', {
					offset : '20%',
					shade : 0
				}, function() {
					//去除只读开启按钮编辑
					$("#serviceAssort").find("input,textarea").attr("readonly", false);
					$("#serviceAssort").find("#addUse2").removeAttr("disabled");
					$("#serviceAssort").find("#modifyBtn").hide();
					$("#serviceAssort").find(".hidbtn").addClass("showbtn");
					$("#serviceAssort").find("[name='delBtn']").removeAttr("hidden");
					layer.close(index);
				});
			} else {
	
				$("#serviceAssort").submit();
				$("#serviceAssort").find("#modifyBtn").show();
				$("#serviceAssort").find(".hidbtn").removeClass("showbtn");
			}
		}
	
	
		function addTr(obj) {
			var html = "<tr><td width=\"40\"><span>类型</span></td><td width=\"260\"><input type=\"type\"id=\"\"name=\"serviceType\"value=\"\"/><input type=\"type\"id=\"\"name=\"id\"value=\"\" hidden=\"hidden\"/></td><td width=\"40\"><span>面积</span></td><td width=\"260\"><input type=\"type\"id=\"\"name=\"serviceArea\"value=\"\"/> ㎡</td><td width=\"40\"><span>位置</span></td><td><input type=\"type\"id=\"\"name=\"serviceSite\"value=\"\"/>"
				+ "<a href=\"javascript:void(0)\"onclick=\"delTr(this)\" name=\"delBtn\"><i class=\"icon-fullscreen\"></i></a></td></tr>";
			$(obj).parent().parent().parent().append(html);
		}
		
		//存储将要删除的id，传到后台删除
		var delAerviceIds = new Array();
		function delTr(obj) {
			var aId = $(obj).parent().parent().find("input[name='id']").val();
			delAerviceIds.push(aId);
			$(obj).parent().parent().remove();
			layer.msg("点击保存后，将彻底删除该条数据！");
		}
		
		var x;//load弹窗index
		//封装表单数据为json
		function initServiceAssort() {
			x=layer.load(2);
			var fkProjectid = parent.parent.projectID; //建筑id
			//封装服务配套数据
			var $t = $("#div_service tr:gt(0)");
			var serviceAssort = new Array();
			for (var i = 0; i < $t.length; i++) {
				var v = $t[i];
				var serviceType = $(v).find("input[name='serviceType']").val();
				var serviceArea = $(v).find("input[name='serviceArea']").val();
				var serviceSite = $(v).find("input[name='serviceSite']").val();
				var id = $(v).find("input[name='id']").val();
				if (!testNum(serviceArea)) {
					layer.msg("第" + (i + 1) + "行面积请输入数值");
					$(v).find("input[name='serviceArea']").focus();
					layer.close(x);
					return null;
				}
				serviceAssort.push({
					id : id,
					serviceType : serviceType,
					serviceArea : serviceArea,
					serviceSite : serviceSite,
					fkProjectid : fkProjectid
				});
		
			}
			return {
				serviceList:serviceAssort,
				delAerviceIds:delAerviceIds,
				opt : optServiceAssort
			};
		}
	
		//成功后调用方法
		function success(responseText) {
			if (responseText.success) {
				layer.alert("保存成功！",{
				offset:'20%',
				shade:[0.1,'#fff']
			},function(){
				getServiceAssortMsg();
				layer.closeAll();
			});
			
				layer.close(x);
				
			} else {
				layer.alert('保存失败！');
				layer.close(x);
			}
		}
	</script>


</form>

